<template>
  <picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
    <view class="picker">
      {{multiIndex[0]>-1? multiArray[0][multiIndex[0]]+'-'+multiArray[1][multiIndex[1]]:'请选择'}}
      <!-- {{multiIndex[0]>-1? multiArray[0][multiIndex[0]]+'-'+multiArray[0][multiIndex[1]]:'请选择'}} -->

    </view>
  </picker>
</template>

<script>
  // import uniIcons from '../uni-icons/uni-icons.vue'
  export default {
    name: 'uniCitys',
    components: {
      // uniIcons
    },
    props: {
      defaultCity:{
        type:Array,
        default:[-1,-1]
      },
      city: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        multiArray: [
          ['请选择'],
          ['请选择']
        ],
        provinceData:[],
        resultList:[],
        citysData:[],
        multiIndex: [-1,-1],
        showSelector: false,
        inputVal: ''
      }
    },
    created() {
      this.multiIndex=this.defaultCity
      this.getCitys();
      console.log(this.multiIndex);
    },
    methods: {
      MultiChange(e) {
        // console.log(e.detail);
        this.multiIndex = e.detail.value
        let column = this.multiIndex[0];
        if(column>=0){
          let i = this.multiIndex[1];
          let city = this.resultList[column].city;
          this.$emit('cityPicker', this.resultList[column].city[i])
          // this.area = city[i].city;
          // console.log(city[i].city);
          // console.log(this.resultList[column].city[i].average_wage);

        }

      },
      MultiColumnChange(e) {
        console.log(e,data);
        let data = {
          multiArray: this.multiArray,
          multiIndex: this.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        let i = e.detail.value;

        if(e.detail.column==0){
          let city = this.resultList[i].city;
          this.citysData = [];
          city.forEach(item => {
            this.citysData.push(item.city);
          })
          data.multiArray[1] = this.citysData;
          data.multiIndex[1] = 0;
        }

        this.multiArray = data.multiArray;
        this.multiIndex = data.multiIndex;
      },
      async getCitys(){
        let param = '';
        let that = this;
        let data = await this.$http.post(
          'wx/socialAreaList', //可以直接放链接(将不启用全局定义域名)
          param,
        );
        // that.provinceData=[''];
        // that.citysData = ['请选择']
        for(var i in data){
          that.provinceData.push(data[i].province);
          that.resultList.push(data[i]);
        }
        let city = data[that.multiIndex[0]]?.city;
        city?.forEach(item => {
          that.citysData.push(item.city);
        })
        that.multiArray = [that.provinceData,that.citysData];
        // console.log(data);
        console.log(that.multiArray,that.multiIndex);
      },
    }
  }
</script>
